<template>
  <div class="event-distribution-container card-area" v-loading="dataLoading">
    <div class="card-title">
      <h3>影响资产类型分布</h3>
    </div>
    <Empty v-if="!dataLoading && !chartData.length"></Empty>
    <div class="content-area">
      <div class="event-chart" ref="pieChart"></div>
    </div>
  </div>
</template>

<script>
const mockPieData = [
  {
    "victimIndustry": "路由器",
    "eventNum": 448
  },
  {
    "victimIndustry": "交换器",
    "eventNum": 152
  },
  {
    "victimIndustry": "服务器",
    "eventNum": 140
  },
  {
    "victimIndustry": "打印机",
    "eventNum": 102
  },
  {
    "victimIndustry": "公共管理、社会保障和社会组织",
    "eventNum": 36
  }
];
import {numConvert} from "@/utils/pe_util.js";
import Empty from '@/components/Empty.vue'


export default {
  name: "EventPie",
  components:{
    Empty
  },
  data() {
    return {
      dataLoading: true,
      chartData: [],
    }
  },
  props: {
    warnLevel:{
      type: Boolean,
      required: true,
    },
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  methods: {
    initComp() {
      console.log('影响资产类型分布组件获取数据了------', this.datePickerValue);
      this.getPieData();
    },
    getPieData() {
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(true)
        }, 1000)
      }).then(() => {
        this.chartData = mockPieData;
        this.formatPieData(mockPieData);
        this.dataLoading = false;
      })
    },
    formatPieData(data) {
      const SData = [];
      for (const item of data) {
        SData.push({
          name: item.victimIndustry,
          value: item.eventNum + Math.floor(Math.random() * 20)
        });
      }
      this.initPieChart(SData, data)
    },
    initPieChart(SData) {
      const getPercent = function (i, total) {
        return `${((i / total) * 100).toFixed(2)}%`
      }
      const color = ['#6456D1', '#436BD9', '#F59E3B', '#EB5F5E', '#348FEA', '#0BC4B6'];
      const total = SData.reduce((t, cur) => t += cur.value, 0);
      const option = {
        backgroundColor: 'transparent',
        legend: {
          type: 'scroll',
          right: '2%',
          top: 'center',
          orient: 'vertical',
          itemWidth: 20,
          itemHeight: 6,
          itemGap: 16,
          textStyle: {
            color: '#3F405D',
            rich: {
              name: {
                width: 60,
                overflow: 'truncate',
                color: '#808191',
                fontSize: 14,
                lineHeight: 14,
              },
              percentGreen: {
                width: 50,
                color: '#0BC4B6',
                fontSize: 14,
              },
              value: {
                overflow: 'truncate',
                color: '#3f405d',
                fontSize: 14,
                lineHeight: 14,
              },
            },
          },
          formatter: function (name) {
            let find = SData.find(el => el.name === name);
            let dealName = name.length > 3 ? name.substr(0, 3) + '...' : name
            return [
              '{name|' + dealName + '}',
              '{percentGreen|' + getPercent(find.value, total) + '}',
              '{value|' + numConvert(find.value) + '}'
            ].join(' ');
          },
          tooltip: {
            show: true
          }
        },
        color: color,
        tooltip: {
          show: true
        },
        series: [{
          type: 'pie',
          radius: ['47%', '68%'],
          center: ['25%', '50%'],
          hoverAnimation: true,
          z: 10,
          itemStyle: {
            // 间隙
            normal: {
              borderWidth: SData.length > 1 ? 3 : 0,
              borderColor: '#fff'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'center',
              color: '#4c4a4a',
              formatter: '{total|' + total + '}' + '\n\r' + '{active|总计}',
              rich: {
                total: {
                  fontSize: 28,
                  fontFamily: "微软雅黑",
                  color: '#454c5c'
                },
                active: {
                  fontFamily: "微软雅黑",
                  fontSize: 16,
                  color: '#6c7a89',
                  lineHeight: 30,
                },
              }
            },
          },
          labelLine: {
            show: false
          },

          data: SData,

        }]
      };
      let chart = this.$echarts.init(this.$refs.pieChart);
      chart.setOption(option, true);
      chart.resize(true);
      this.chartLoading = false;
    },
  }
}
</script>

<style scoped lang="scss">
.event-distribution-container {
  width: 430px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .card-title {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    > h3 {
      color: #808191;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .content-area {
    width: 100%;
    height: 253px;
    padding: 0 15px 15px 15px;

    .event-chart {
      width: inherit;
      height: 233px;
    }
  }
}
</style>